<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>Animated Zooming Demo</title>
    <link rel="stylesheet" href="http://openlayers.org/website.css" type="text/css" />
    <style type="text/css">
        #map {
            width: 99%;
            height: 512px;
            border: 1px solid black;
            margin-right: 50px;
        }
    </style>

    <script src="./lib/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        function init(){
            var map = new OpenLayers.Map('map', 
                {controls: [], 
                'maxResolution': 1.40625, 
                tileSize: new OpenLayers.Size(256,256)});
                map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.MouseDefaults());
                map.addControl(new OpenLayers.Control.KeyboardDefaults());
                map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
                map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.OverviewMap());
         
            var ol_wms = new OpenLayers.Layer.WMS( 
                "OpenLayers (WMS)", 
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'} );
            
            var ol_wms_untiled = new OpenLayers.Layer.WMS.Untiled(
                "OpenLayers (WMS untiled)", 
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'} );
                
            var imglayer = new OpenLayers.Layer.Image(
                "City Lights (Image)",
                "http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif",
                new OpenLayers.Bounds(-180, -90, 180, 90),
                new OpenLayers.Size(580, 288),
                {maxResolution: 'auto', numZoomLevels: 5}); 
     
            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                         "prov_bound,fedlimit,rail,road,popplace",
                 transparent: "true", format: "image/png" });

            dm_wms.setVisibility(false);

            map.addLayers([ol_wms, ol_wms_untiled, imglayer, dm_wms]);

            if (!map.getCenter())
                map.zoomToMaxExtent();
        }
        // -->
    </script>

  </head>
  <body onload="init()" >
    <div id="olbanner" style="height: 80px;">
      <img class="openlayersbannerimg" 
      src="http://www.openlayers.org/images/OpenLayers.trac.png" 
      style="height: 44px; width: 49px;border:0px" 
      alt="OpenLayers" />
      <a class="penlayersbanner" >OpenLayers</a><br>
       <h3 style="font-weight: normal; font-size: 0.4em; margin: 0 0 0 75;">
       Demo with animated zooming and panning</h3>  
    </div>

    <div id="mainnav" class="nav"><small>&nbsp;</small>
</div>

    <div id="map"></div>
    
    <small style="text-align: right; color:#000000; font-weight: normal; margin: 0 0 0 12;">animated zooming feature by <a href="mailto:emanuel(at)intevation.de"> Emanuel Sch&uuml;tze</a>, <a target="_blank" href="http://intevation.org">Intevation GmbH</a></small>

  </body>

</html>
